<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-10-11
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-10-11
 * @FilePath: /element-admin/src/views/aliyun/VpProduct.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="purn-ever-green-wealth-income-page">
    <!--顶部搜索栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="5" :offset="0" class="clearfix">
          <div class="artiOptDiv">
            <el-row :gutter="20">
              <el-card class="base-box-card">
                <template #header>
                  <div class="base-card-header">
                    <span>选择配色</span>
                  </div>
                </template>
                <el-form :model="query">
                  <el-form-item>
                    <el-radio-group v-model="color_choose" class="ml-4">
                      <div v-for="(color,index) in select_color_options" :key="index" class="text item colorDivRow">
                        <div style="margin-right: 15px">
                          <el-radio :label="color.key" size="small" @change="handleChg(1,color.key)">方案</el-radio>
                        </div>
                        <div :style="{background:color.opt.bitcolor}" class="colorbitOptDiv">
                          <span class="colorbitSpan">{{ color.opt.label }}(底纹)</span>
                        </div>
                        <div :style="{background:color.opt2.bitcolor}" class="colorbitOptDiv">
                          <span class="colorbitSpan">{{ color.opt2.label }}(文字)</span>
                        </div>
                      </div>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
                <template class="base-card-footer">
                  <div><span>选择以上参考色</span></div>
                </template>
              </el-card>
            </el-row>
          </div>
        </el-col>
        <!-- 右侧预览展示区域 -->
        <el-col :span="19" :offset="0" class="clearfix">
          <div class="artiContdiv">
            <el-card class="base-box-card" style="width: 100%">
              <template #header>
                <div class="base-card-header">
                  <span>排版预览</span>
                  <el-button class="button" plain @click.native="handleLoad">排版内容</el-button>
                </div>
              </template>
              <div class="base-card-body" v-if="dialogForm.content_bg_imageType == 1">
                <el-card class="arti-card" :style="{width:div_width,'background-image': 'url(' + local_content_bg_image + ')' }">
                  <div class="arti-pic-div-nobg">
                      <el-image class="arti-pic" :src="local_content_head_image" fit="fill" :lazy="true"></el-image>
                  </div>
                  <div class="arti-div-nobg">
                    <div v-for="(item, index) in contentTableData" :key="index" class="content-div-txt">
                      <el-card :style="{background:content_color_bgc,color:content_color,borderRadius:localContentDivBorderRadius}">
                        <div><h5>{{ item.title }}</h5></div>
                        <div style="text-align:justify">{{ item.content }}</div>
                      </el-card>
                    </div>
                  </div>
                </el-card>
              </div>
              <div class="base-card-body" v-if="dialogForm.content_bg_imageType == 0">
                <el-card class="arti-card" :style="{width:div_width}">
                  <div class="arti-pic-div">
                    <el-image class="arti-pic" :src="local_content_head_image" fit="fill" :lazy="true"></el-image>
                  </div>
                  <div class="arti-div">
                    <div v-for="(item, index) in contentTableData" :key="index" class="content-div-txt">
                      <el-card
                          :style="{background:content_color_bgc,color:content_color,borderRadius:localContentDivBorderRadius}">
                        <div><h5>{{ item.title }}</h5></div>
                        <div style="text-align:justify">{{ item.content }}</div>
                      </el-card>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 页面内容编辑区域 -->
    <el-drawer title="编辑内容" :visible.sync="isDrawerShow" :with-header="false" :size="drawerWidth">
      <!--顶部搜索栏-->
      <div class="col-md-12 custRow">
        <el-row :gutter="20">
          <el-col :span="22" :offset="1" class="clearfix">
            <el-form :inline="true" :model="query" class="demo-form-inline">
              <el-form-item>
                <el-button @click="isDrawerShow = false">取消</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSave">确认</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!--中部数据表格栏-->
      <div class="col-md-12 custRow">
        <el-row :gutter="20">
          <el-col :span="22" :offset="1" class="clearfix">
            <template>
              <el-tabs type="border-card">
                <el-tab-pane label="页面尺寸Pager">
                  <el-form :model="dialogForm" label-width="100px">
                    <el-divider>
                      <el-icon>
                        <star-filled/>
                      </el-icon>
                      页面尺寸
                    </el-divider>
                    <el-row :gutter="10">
                      <el-col :sm="16" :xs="16" :md="16" :lg="16" :xl="16">
                        <el-form-item label="页面尺寸">
                          <el-radio-group v-model="dialogForm.pageSize">
                            <el-radio :label="1">480 * 800</el-radio>
                            <el-radio :label="2">540 * 960</el-radio>
                            <el-radio :label="3">720 * 1280</el-radio>
                            <el-radio :label="4">1080 * 1920</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-divider>
                      <el-icon>
                        <star-filled/>
                      </el-icon>
                      背景底色
                    </el-divider>
                    <el-row :gutter="10">
                      <el-col :sm="5" :xs="5" :md="5" :lg="5" :xl="5">
                        <el-form-item label="底色">
                          <el-input v-model="dialogForm.div_dg_color" placeholder="底色" size="small" :clearable="true"
                                    maxlength="7"></el-input>
                          <el-color-picker v-model="dialogForm.div_dg_color"/>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="5" :xs="5" :md="5" :lg="5" :xl="5">
                        <el-form-item label="内容背景色">
                          <el-input v-model="dialogForm.content_color_bgc" placeholder="内容背景色" size="small"
                                    :clearable="true" maxlength="7"></el-input>
                          <el-color-picker v-model="dialogForm.content_color_bgc"/>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="5" :xs="5" :md="5" :lg="5" :xl="5">
                        <el-form-item label="字体色">
                          <el-input v-model="dialogForm.content_color" placeholder="字体色" size="small"
                                    :clearable="true" maxlength="7"></el-input>
                          <el-color-picker v-model="dialogForm.content_color"/>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-divider>
                      <el-icon>
                        <star-filled/>
                      </el-icon>
                      段落内容
                    </el-divider>
                    <el-row :gutter="10">
                      <el-col :sm="5" :xs="5" :md="5" :lg="5" :xl="5">
                        <el-form-item label="段落分割">
                          <el-input-number v-model="dialogForm.colCount" :min="1" :max="9"/>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :sm="5" :xs="5" :md="5" :lg="5" :xl="5">
                        <el-form-item label="圆角">
                          <el-input v-model="dialogForm.borderRadius" placeholder="圆角" size="small"
                                    :clearable="true" maxlength="6"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="5" :xs="5" :md="5" :lg="5" :xl="5">
                        <el-form-item label="内边距">
                          <el-input v-model="dialogForm.contentDivPadding" placeholder="内边距" size="small"
                                    :clearable="true" maxlength="6"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :sm="5" :xs="5" :md="5" :lg="5" :xl="5">
                        <el-form-item label="外边距">
                          <el-input v-model="dialogForm.contentDivMargin" placeholder="外边距" size="small"
                                    :clearable="true" maxlength="6"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :sm="16" :xs="16" :md="16" :lg="16" :xl="16">
                        <el-form-item label="标题位置">
                          <el-radio-group v-model="dialogForm.contentTitleAlign">
                            <el-radio :label="1">居左</el-radio>
                            <el-radio :label="2">居中</el-radio>
                            <el-radio :label="3">居右</el-radio>
                            <el-radio :label="4">适中</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="段落Paragraph">
                  <el-form :model="dialogForm" label-width="100px">
                    <el-row :gutter="10">
                      <el-form-item label="编辑内容">
                        <el-col :sm="20" :xs="20" :md="20" :lg="20" :xl="20">
                          <el-input v-model="dialogForm.iptTitle" placeholder="编辑内容标题" size="small"
                                    :clearable="true"></el-input>
                          <el-input v-model="dialogForm.iptContent" placeholder="编辑内容" size="small"
                                    :clearable="true" type="textarea"></el-input>
                        </el-col>
                        <el-button type="primary" @click="addContent" size="small">添加</el-button>
                      </el-form-item>
                      <template>
                        <el-table :data="dialogForm.tableData"
                                  :cell-style="{padding:'3px'}"
                                  :row-style="{height:'30px'}"
                                  :height="tableHeight" :key="isIndex" style="width: 100%" border stripe
                                  row-key="isIndex">
                          <el-table-column v-if="isIndex == 1" type="index" label="序号" width="75"></el-table-column>
                          <el-table-column prop="title" label="标题" width="180"/>
                          <el-table-column prop="content" label="内容"/>
                          <el-table-column label="操作" :width="optCulWidth">
                            <template v-slot="scope">
                              <el-button type="primary" plain size="mini" @click="editContent(scope.row)">编辑
                              </el-button>
                              <el-button type="danger" plain size="mini" @click="delContent(scope.row)">删除
                              </el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </template>
                    </el-row>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="配图Picture">
                  <el-form :model="dialogForm" label-width="100px">
                    <el-row :gutter="10">
                      <el-form-item label="底色类型">
                        <el-radio-group v-model="dialogForm.content_bg_imageType">
                          <el-radio :label="0">纯色</el-radio>
                          <el-radio :label="1">底图</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <div v-if="dialogForm.content_bg_imageType == 1">
                      <el-form-item label="顶部图">
                        <el-col :sm="20" :xs="20" :md="20" :lg="20" :xl="20">
                          <el-input v-model="dialogForm.content_head_image" placeholder="顶部图" size="small"
                                    :clearable="true"></el-input>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="底图">
                        <el-col :sm="20" :xs="20" :md="20" :lg="20" :xl="20">
                          <el-input v-model="dialogForm.content_bg_image" placeholder="底图" size="small"
                                    :clearable="true"></el-input>
                        </el-col>
                      </el-form-item>
                      </div>
                      <div v-if="dialogForm.content_bg_imageType == 0">
                      <el-form-item label="配色方案">
                        <el-col :sm="20" :xs="20" :md="20" :lg="20" :xl="20">
                          <el-radio-group v-model="color_choose" class="ml-4">
                            <div v-for="(color,index) in select_color_options" :key="index"
                                 class="text item colorDivRow">
                              <div style="margin-right: 15px">
                                <el-radio :label="color.key" size="small" @change="handleChg(1,color.key)">配色方案
                                </el-radio>
                              </div>
                              <div :style="{background:color.opt.bitcolor}" class="colorbitOptDiv">
                                <span class="colorbitSpan">{{ color.opt.label }}(底纹)</span>
                              </div>
                            </div>
                          </el-radio-group>
                        </el-col>
                      </el-form-item>
                      </div>
                    </el-row>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
            </template>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import {choose_col, tableData} from "@/api/ArticalDesForm";

export default {
  name: "ArticalDesFormView",
  props: {
    colCount: {
      type: Number,
      default: 1
    },
    ContentDivBorderRadius: {
      type: String,
      default: "5px"
    },
    ContentDivPadding: {
      type: String,
      default: "10px"
    },
    ContentDivMargin: {
      type: String,
      default: "5px"
    },
    contentTitleAlign: {
      type: String,
      default: "center"
    },
    transparentBg: {
      type: String,
      default: "center"
    },
    content_head_image:{
      type: String,
      default: "https://img01.jituwang.com/200918/163335-20091QKH258.jpg"
    },
    content_bg_image: {
      type: String,
      default: "https://img01.jituwang.com/200729/165617-200HZ22U314.jpg"
    }
  },
  components: {},
  data() {
    return {
      isLoading: false,
      isDrawerShow: false,
      drawerWidth: "1240px",
      tableHeight: 650,
      optCulWidth: 150,
      select_color_options: [],
      color_choose: "",
      div_width: "100%",
      local_content_head_image: this.content_head_image,
      local_content_bg_image: this.content_bg_image,
      content_color_bgc: "",
      content_color: "",
      div_dg_color: this.transparentBg,
      query: {},
      localColCount: this.colCount,
      localContentTitleAlign: this.localContentTitleAlign,
      localContentDivBorderRadius: this.ContentDivBorderRadius,
      localContentDivPadding: this.ContentDivPadding,
      localContentDivMargin: this.ContentDivMargin,
      dialogForm: {
        colCount: 1,
        pageSize: "",
        div_dg_color: "",
        content_color_bgc: "",
        content_color: "",
        borderRadius: "5px",
        contentDivPadding: "10px",
        contentDivMargin: "5px",
        iptTitle: "",
        iptContent: "",
        contentTitleAlign: "",
        tableData: [],
        content_bg_imageType: 0,
        content_bg_image: "",
        content_head_image: "",
      },
      isIndex: 1,
      contentTableData: [],
    }
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    handleFetch() {
      this.isLoading = true;
      this.handleInit();
    },
    handleClose() {
      this.isDrawerShow = false;
    },
    handleInit() {
      this.select_color_options = eval(choose_col);
      this.contentTableData = tableData;
    },
    handleChg(flg, obj) {
      var bga = this.select_color_options[obj - 1]["opt"]["bitcolor"];
      var bgb = this.select_color_options[obj - 1]["opt2"]["bitcolor"];
      this.content_color_bgc = bga;
      this.content_color = bgb;
      var rgb = this.select_color_options[obj - 1]["opt"]["rgb"];
      var colors = rgb.split(",")
      this.div_dg_color = "rgba(" + colors[0].replace("R", "") + ", " + colors[1].replace("G", "") + ", " + colors[2].replace("B", "") + ", 0.5)";
    },
    handleLoad() {
      if (this.div_width == "480px") {
        this.dialogForm.pageSize = 1
      } else if (this.div_width == "540px") {
        this.dialogForm.pageSize = 2
      } else if (this.div_width == "720px") {
        this.dialogForm.pageSize = 3
      } else if (this.div_width == "1080px") {
        this.dialogForm.pageSize = 4
      }
      this.dialogForm.colCount = this.localColCount; // 列数
      this.dialogForm.div_dg_color = this.div_dg_color; // 背景色
      this.dialogForm.content_color_bgc = this.content_color_bgc;
      this.dialogForm.content_color = this.content_color; // 字体色
      this.dialogForm.content_head_image = this.content_head_image;
      this.dialogForm.content_bg_image = this.content_bg_image;
      //标题位置
      if (this.localContentTitleAlign == "left") {
        this.dialogForm.contentTitleAlign = 1;
      } else if (this.localContentTitleAlign == "center") {
        this.dialogForm.contentTitleAlign = 2;
      } else if (this.localContentTitleAlign == "right") {
        this.dialogForm.contentTitleAlign = 3;
      } else if (this.localContentTitleAlign == "justify") {
        this.dialogForm.contentTitleAlign = 4;
      }
      this.dialogForm.contentDivPadding = this.localContentDivPadding;// 内边距
      this.dialogForm.contentDivMargin = this.localContentDivMargin;// 外边距
      this.dialogForm.borderRadius = this.localContentDivBorderRadius;//内容div圆角
      this.dialogForm.tableData = [];
      this.contentTableData.forEach((element) => {
        this.dialogForm.tableData.push(element);
      })
      this.isDrawerShow = true;
    },
    handleSave() {
      // 页面内容宽度
      if (this.dialogForm.pageSize == 1) {
        this.div_width = "480px"
      } else if (this.dialogForm.pageSize == 2) {
        this.div_width = "540px"
      } else if (this.dialogForm.pageSize == 3) {
        this.div_width = "720px"
      } else if (this.dialogForm.pageSize == 4) {
        this.div_width = "1080px"
      } else {
        this.div_width = ""
      }
      // 配置表格的背景色
      // this.div_dg_color = this.dialogForm.div_dg_color;
      // this.content_color_bgc = this.dialogForm.content_color_bgc;
      // this.content_color = this.dialogForm.content_color;
      // 这里配置页面的CSS中prop变量值 START
      this.localColCount = this.dialogForm.colCount;
      this.localContentDivBorderRadius = this.dialogForm.borderRadius;
      if (this.dialogForm.contentTitleAlign == 1) {
        this.localContentTitleAlign = "left";
      } else if (this.dialogForm.contentTitleAlign == 2) {
        this.localContentTitleAlign = "center";
      } else if (this.dialogForm.contentTitleAlign == 3) {
        this.localContentTitleAlign = "right";
      } else if (this.dialogForm.contentTitleAlign == 4) {
        this.localContentTitleAlign = "justify";
      } else {
        this.localContentTitleAlign = "center"
      }
      this.localContentDivPadding = this.dialogForm.contentDivPadding;
      this.localContentDivMargin = this.dialogForm.contentDivMargin;
      this.local_content_head_image = this.dialogForm.content_head_image;
      this.local_content_bg_image= this.dialogForm.content_bg_image;
      // 这里配置页面的CSS中prop变量值 END
      // 清空表格，重新添加
      this.contentTableData = [];
      this.dialogForm.tableData.forEach((element) => {
        this.contentTableData.push(element);
      })
      this.isDrawerShow = false;
    },
    addContent() {
      this.dialogForm.tableData.push({title: this.dialogForm.iptTitle, content: this.dialogForm.iptContent});
    },
    delContent(row) {
      this.dialogForm.tableData.splice(row.index, 1);
    },
    editContent(row) {
      this.dialogForm.iptTitle = row.title;
      this.dialogForm.iptContent = row.content;
    }
  },
  created() {
    this.handleInit();
  },
  mounted() {
  },
}
</script>
<style lang="scss" scoped>
.custRow {
  margin-top: 5px;
  padding: 5px 5px 5px 5px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.base-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.base-card-body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.base-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.colorDivRow {
  width: 100%;
}

.text {
  font-size: 14px;
}

.item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}

.base-box-card {
  margin-bottom: 15px;
}

.colorbitOptDiv {
  display: flex;
  height: 50px;
  width: 100px;
  justify-content: center;
  align-items: center;
}

.colorbitSpan {

}

.artiOptDiv {
  padding: 5px 5px 5px 5px;
}

.artiContdiv {
  padding: 5px 5px 5px 5px;
}
.arti-card {
  width: 100%; /* 设置div元素的宽度为100% */
  height: 100%; /* 设置div元素的高度为100% */
  background-size: cover; /* 设置背景图像自适应大小并完全覆盖div元素 */
  background-repeat: no-repeat; /* 取消重复显示背景图像 */
  background-position: center; /* 居中显示背景图像 */
}
.arti-pic {
  padding: 0px;
}
.arti-pic-div {
  background-color: v-bind(div_dg_color); /* 背景透明度为0.5 */
  height: 50%;
  padding: 10px 100px 0px 100px;
}
.arti-pic-div-nobg {
  height: 50%;
  padding: 10px 100px 0px 100px;
}
.arti-div {
  -moz-column-count: v-bind(localColCount); /* Firefox */
  -webkit-column-count: v-bind(localColCount); /* Safari 和 Chrome */
  column-count: v-bind(localColCount);
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
  background-color: v-bind(div_dg_color); /* 背景透明度为0.5 */
}
.arti-div-nobg {
  -moz-column-count: v-bind(localColCount); /* Firefox */
  -webkit-column-count: v-bind(localColCount); /* Safari 和 Chrome */
  column-count: v-bind(localColCount);
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
}
.content-div-txt {
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  border: 0px solid #546948;
  padding: v-bind(localContentDivPadding) v-bind(localContentDivPadding) v-bind(localContentDivPadding) v-bind(localContentDivPadding);
  margin: v-bind(localContentDivMargin) v-bind(localContentDivMargin) v-bind(localContentDivMargin) v-bind(localContentDivMargin);
  border-radius: v-bind(localContentDivBorderRadius);
  text-align: v-bind(localContentTitleAlign);
}
</style>